<!doctype html>
<html lang="zh-CN" th:replace="admin-layout-default :: layout(~{::title}, ~{}, ~{::script}, ~{::body})"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>选择试卷列表</title>
    <script>
        var $table = $("#table");
        var $remove = $("#removeBtn");
        var $update = $("#updateBtn");
        var $search = $("#searchBtn");
        var selections = [];
        var rows = [];

        $(function () {
            selections=parent.childIds;
            rows=parent.childRows;
            tableList(columns);
        })

        var columns = [{
            field:"state",
            checkbox: true,
            formatter: stateFormatter
        }, {
            field: 'name',
            title: '试卷名称',
            align: 'center',
        }, {
            field: 'time',
            title: '答题时间',
            align: 'center',
        }, {
            field: 'score',
            title: '考试总分',
            align: 'center',
        }, {
            field: 'qstNum',
            title: '试题数量',
            align: 'center',
        }]

        function stateFormatter(value, row, index) {
            var index = parent.childIds.indexOf(row.id);
            if (index > -1) {
                return true;
            }
            var index2=selections.indexOf(row.id);
            if (index2 > -1) {
                return true;
            }
            return false;
        }

        function genderFormatter(value, row, index) {
            if (row.gender === "B") {
                return "男";
            } else if (row.gender === "C") {
                return "女";
            } else {
                return "外星人";
            }
        }

        function typeFormatter(value, row, index) {
            if (row.type === "A") {
                return "管理员";
            } else {
                return "普通用户";
            }
        }

        function detailFormatter(index, row) {
            console.log(row)
            var html = []
            $.each(row, function (key, value) {
                html.push('<p><b>' + key + ':</b> ' + value + '</p>')
            })
            return html.join('')
        }

        //操作按钮
        function operateFormatter(value, row, index) {
            return [
                '<a class="btn btn-primary btn-xs" href="/admin/user/update/' + row.id + '">修改</a>',
                '&nbsp;',
                '<a class="btn btn-primary btn-xs" href="/admin/user/reset/password/' + row.id + '">重置密码</a>',
                '&nbsp;',
                '<button type="button" class="btn btn-danger btn-xs removeBtn">删除</button>'
            ].join('')
        }

        //操作按钮事件
        window.operateEvents = {
            'click .removeBtn': function (e, value, row, index) {
                confirmAlert(function () {
                    ajaxJson("/admin/user/ajax/remove", {"id": row.id}, function (res) {
                        if (res.status) {
                            $table.bootstrapTable('remove', {
                                field: 'id',
                                values: [row.id]
                            })
                        }
                    })
                })
            }
        }

        $remove.click(function () {
            confirmAlert(function () {
                var ids = getIdSelections();
                ajaxJson("/admin/user/ajax/delete", {"ids": ids.toString()}, function (res) {
                    if (res.status) {
                        $table.bootstrapTable('remove', {
                            field: 'id',
                            values: ids
                        })
                        $remove.prop('disabled', true);
                        $update.prop('disabled', true);
                    }
                })
            })
        })

        $update.click(function () {
            var ids = getIdSelections()
            if (ids) {
                location.href = "/admin/user/update/" + ids[0]
            }
        })

        function getData(){
            return  $table.bootstrapTable('getData');
        }

        function getIdSelections() {
            return $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id
            })
        }

        function getRowSelections() {
            return $.map($table.bootstrapTable('getSelections'), function (row) {
                return row;
            })
        }

        $table.on('check.bs.table uncheck.bs.table ' +
            'check-all.bs.table uncheck-all.bs.table',
            function () {
                $remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
                $update.prop('disabled', !$table.bootstrapTable('getSelections').length)

                var rows2=getData();

                //移出取消选中的id
                var selectionsCopy=[];
                for (var i = 0; i < selections.length; i++) {
                    var b = false;
                    var id=selections[i];
                    for (var j = 0; j < rows2.length; j++) {
                        var row2=rows2[j];
                        if (id===row2.id){
                            b=true;
                            break;
                        }
                    }
                    if(!b){
                        selectionsCopy.push(id);
                    }
                }
                selections=selectionsCopy;
                // 获取选中的id
                selections=selections.concat(getIdSelections());

                //循环已有的数据集合
                var rowsCopy=[];
                for (var i = 0; i < rows.length; i++) {
                    var b = false;
                    var row1=rows[i];
                    //循环列表的数据集合
                    for (var j = 0; j < rows2.length; j++) {
                        var row2=rows2[j];
                        //已有的数据集合存在列表集合中的数据
                        if (row1.id===row2.id){
                            b=true;
                            break;
                        }
                    }
                    if(!b){
                        rowsCopy.push(row1);
                    }
                }
                rows=rowsCopy;
                rows=rows.concat(getRowSelections());
            })

        $search.click(function () {
            $table.bootstrapTable('refresh')
        })
    </script>
</head>
<body>
<div class="fyl-mb10">
    <form id="toolbar">
        <input type="hidden" name="page" id="page">
        <div class="row">
            <div class="col-sm-4 col-md-4 col-lg-2 fyl-mb10">
                <input type="text" class="form-control fyl-clear" name="name"
                       placeholder="试卷名称"
                       autocomplete="off">
            </div>
            <div class="col-sm-4 col-md-4 col-lg-2 fyl-mb10">
                <a href="javascript:void(0)" class="btn btn-primary" id="searchBtn">查询</a>
                <a href="javascript:void(0)" class="btn btn-warning" id="clearSearchBtn">清空</a>
            </div>
        </div>
    </form>
</div>
<table id="table" data-url="/admin/paper/ajax/list"></table>
</body>
</html>